import React from 'react';
import { connect } from 'dva';
import { Modal, Cascader, Form, Input, Select, message } from 'antd';
import PropTypes from 'prop-types';

import city from '../../utils/city';


const typeMap = {
  1: '公共仓库',
  3: '合约仓库',
  2: '自有仓库',
  4: '分销商仓库',
};

const Option = Select.Option;

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

class EditModal extends React.Component {
  constructor(p) {
    super(p);
    this.handleOK = this.handleOK.bind(this);

    const { data } = this.props;
    this.state = {
      place: data.place, // 地址
      thename: data.thename, // 名字
      thetype: data.thetype, // 类型
      remark: data.remark, // 备注
      wid: data.wid,
      capacity: data.capacity, // 容量
      contact: data.contact, // 联系方式
    };
  }

  // 处理点击[更新]的按钮
  handleOK() {
    const {
      validateFields,
      getFieldsValue,
    } = this.props.form;
    validateFields((err) => {
      if (!err) {
        const value = getFieldsValue();
        value.wid = this.state.wid;
        const { dispatch } = this.props;
        dispatch({
          type: 'warehouse/edit',
          payload: {
            value,
            onEnd: (error) => {
              if (error) {
                return message.error(error);
              }
              message.success('更新成功');
              this.props.onFinish();
            },
          },
        });
      }
    });
  }

  render() {
    const { form, visible, onFinish, loading } = this.props;
    const {
      getFieldDecorator,
    } = form;
    return (
      <Modal
        visible={visible}
        title="编辑"
        onCancel={onFinish}
        okText="更新"
        cancelText="取消"
        onOk={this.handleOK}
        confirmLoading={loading.effects['warehouse/edit']}
      >
        <Form layout="horizontal">
          <FormItem label="名称" hasFeedback {...formItemLayout}>
            {getFieldDecorator('thename', {
              initialValue: this.state.thename,
              rules: [
                {
                  required: true,
                  message: '名称不能为空',
                },
              ],
            })(<Input maxLength="20" />)}
          </FormItem>

          <FormItem label="容量" hasFeedback {...formItemLayout}>
            {getFieldDecorator('capacity', {
              initialValue: this.state.capacity,
              rules: [
                {
                  required: true,
                  message: '容量不能为空',
                },
              ],
            })(<Input maxLength="20" type="number" />)}
          </FormItem>

          <FormItem label="联系方式" hasFeedback {...formItemLayout}>
            {getFieldDecorator('contact', {
              initialValue: this.state.contact,
            })(<Input maxLength="20" />)}
          </FormItem>

          <FormItem label="类型" hasFeedback {...formItemLayout}>
            {getFieldDecorator('thetype', {
              initialValue: String(this.state.thetype),
              rules: [
                {
                  required: true,
                  message: '类型不能为空',
                },
              ],
            })(<Select
              style={{ width: '100%' }}
              placeholder="选择一个类型"
            >
              {
              Object.keys(typeMap).map((item) => {
                return (
                  <Option value={item}>{typeMap[item]}</Option>
                );
              })
            }
            </Select>,
            )}
          </FormItem>
          <FormItem label="地址" hasFeedback {...formItemLayout}>
            {getFieldDecorator('place', {
              initialValue: this.state.place.split('/'),
              rules: [
                {
                  required: true,
                  message: '地址不能为空',
                },
              ],
            })(<Cascader
              style={{ width: '100%' }}
              options={city}
              placeholder="选择一个地址"
            />,
            )}
          </FormItem>
          <FormItem label="备注" hasFeedback {...formItemLayout}>
            {getFieldDecorator('remark', {
              initialValue: this.state.remark,
            })(<Input maxLength="40" />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

EditModal.propTypes = {
  onFinish: PropTypes.func,
  data: PropTypes.object,
  visible: PropTypes.bool,
};

EditModal.defaultProps = {
  onFinish: () => null,
  data: {},
};

export default connect(state => state)(Form.create()(EditModal));
